<template>
    <section class='navgator-bottom'>
        <!-- Vue 模板内容 -->
        <article class="nav-card" v-for="item in state.list" :key="item">
            <button class="nav-item" @click="emits('toggle')">{{ item }}</button>
            <!-- <button class="nav-close" @click="emits('close')">X</button> -->
        </article>
    </section>
</template>

<script setup lang='ts'>
import { reactive, onMounted, defineEmits } from 'vue'
import { useRoute } from "vue-router";
const emits = defineEmits(['toggle', 'close'])
const state = reactive({
    list: [] as any[],
    route: useRoute(),
    
})
onMounted(() => {
    console.log(state.route.meta)
    state.list = [state.route.meta.title]
})
</script>

<style scoped>
/* 组件样式 */
</style>